<template>
	<div class="bottom-left-chart-1">
		<div class="header-name">
			<svg-icon icon-class="alanum" style="color:#5cd9e8"></svg-icon>
			物料各大类总库存
		</div>
		<div class="content">
			<!-- <dv-charts :option="option" style="height: 100%;" /> -->
			
			<div id="skuCount" style="height:100%;"></div>
		</div>
	</div>
</template>

<script>
		const echarts = require("echarts");
	export default {
		name: 'skuCount',
			data() {
				return {
					chart: null,
					item: "",
					interval: "10000",
					option:"",
					type:0,
				};
			},
		// },
		mounted() {
			// this.fetchData();
			
			this.chart = echarts.init(document.getElementById("skuCount"));
			this.option = {
						series: [{
							type: 'pie',
							radius: [20, 80],
							data: [],
							label: {
								formatter: '{b}:{c}',
								minMargin: 5,
								edgeDistance: 10,
								lineHeight: 15,
								rich: {
									time: {
										fontSize: 10,
										color: '#999'
									}
								}
							},
							labelLine: {
								length: 15,
								length2: 0,
								maxSurfaceAngle: 80
							},
							labelLayout: function(params) {
								var isLeft = params.labelRect.x < echarts.getWidth() / 2;
								var points = params.labelLinePoints;
								// Update the end point.
								points[2][0] = isLeft ?
									params.labelRect.x :
									params.labelRect.x + params.labelRect.width;
				
								return {
									labelLinePoints: points
								};
							},
							// insideLabel: {
							//         show: true
							//       }
						}, ],
						color: ['#00c0ff', '#3de7c9', '#7c74ec', '#f1f34b', '#72d0ac', ]
			};
			
			 var category=[];
			 var data=[];
			 this.chart.setOption(this.option,true);
			setInterval(this.changeColor,1000);
			this.fetchData();
			
		},
		methods: {
			fetchData() {
				this.$http.get('/API/getSkuCount', )
					.then(response => {
						if (response.data.code == 0) {
							let alarm = response.data.data;
							let kdata = [];
							let vdata = [];
							kdata = Object.keys(alarm);
							vdata = Object.values(alarm);
							let data1 = kdata.map((item, index) => {
								return {
									'name': kdata[index] == '' ? '其他' : kdata[index],
									'value': vdata[index]
								}
							})

							this.option.series[0].data = data1;

							this.option = {
								...this.option
							}
							this.chart.setOption(this.option,true);
							setTimeout(this.fetchData, 10000);
						}
					}).catch(err => {

					})
			},
		}
	}
</script>

<style lang="scss">
	.bottom-left-chart-1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;

		.header-name {
			height: 10%;
			padding-top: 10px;
			text-align: center;
		}

		.content {
			flex: 2;
		}


		/* .decoration-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid fade(#fefefe, 30);
    top: 190px;
    left: 50%;
    transform: translateX(-50%);
  } */
	}
</style>
